<template>
    <div class="top">
        <div class="content">
            <!-- 左侧 -->
            <div @click="goHome" class="left">
                <img src="@/assets/images/logo.png" alt="logo">
                <p>尚医通 预约挂号统一平台</p>
            </div>
            <!-- 右侧 -->
            <div class="right">
                <p class="help">帮助中心</p>
                <p class="login" v-if="!userStore.userInfo.name" @click="login">登录/注册</p>
                <!-- 如果有用户信息 -->
                <el-dropdown @command="(command: string) => { $router.push({ path: command }) }" v-else>
                    <span class="login">
                        {{ userStore.userInfo.name }}
                        <el-icon>
                            <arrow-down />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="/user/certification">实名认证</el-dropdown-item>
                            <el-dropdown-item command="/user/order">挂号订单</el-dropdown-item>
                            <el-dropdown-item command="/user/patient">就诊人管理</el-dropdown-item>
                            <el-dropdown-item @click="logOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
// 引入路由组件
import { useRouter } from "vue-router"
// 引入仓库数据
import useUserStore from "@/store/modules/user";
// 引入箭头组件
import { ArrowDown } from '@element-plus/icons-vue'


/* 数据 */
// 创建一个路由器
let $router = useRouter();
// 接收仓库数据
let userStore = useUserStore();


/* 方法 */
// 点击左侧 div 时触发，返回首页
const goHome = () => {
    $router.push({ path: "/home" })
}
// 点击登录按钮时触发，显示登陆组件
const login = () => {
    // 改变登录组件标识符
    userStore.visiable = !userStore.visiable;
}
// 退出登录按钮的回调
const logOut = () => {
    // 通知 pinia 仓库清除用户信息
    userStore.logOut();
    // 编程式导航路由跳转到首页
    $router.push({ path: "/home" })
}
</script>

<style scoped lang="scss">
.top {
    /* 元素的位置在屏幕滚动时不会改变 */
    position: fixed;
    /* 最高层级 */
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    display: flex;
    justify-content: center;

    .content {
        width: 1200px;
        height: 70px;
        background-color: white;
        display: flex;
        /* 均匀排列每个元素 */
        /* 首个元素放置于起点，末尾元素放置于终点 */
        justify-content: space-between;

        .left {
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;

            img {
                width: 50px;
                height: 50px;
                margin-right: 10px;
            }

            p {
                font-size: 20px;
                color: #55a6fe;
            }
        }

        .right {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #bbb;

            .help {
                margin-right: 10px;
            }

            .login {
                cursor: pointer;
                display: flex;
                align-items: center;
            }

            .login:hover {
                color: #55a6fe;
            }
        }
    }
}
</style>